<template>
  <div>
    <div
      v-for="(problem, problemIdx) in questionnaire"
      :key="problemIdx"
      class="borderBox mb-15"
    >
      <!-- 题目 -->
      <div class="disFlxAC">
        <div class="linh-36 shrink0 disFlxAC flexEnd" style="width: 100px">
          <div class="pr-2 colorRED">*</div>
          <div>{{ problemIdx + 1 }}</div>
          <div>（{{ problem.type === 1 ? "单选" : "多选" }}）</div>
        </div>
        <div style="flex: 1" class="px-10">
          <el-input
            v-model="problem.question"
            placeholder="请输入问题"
            clearable
          ></el-input>
        </div>
      </div>
      <!-- 选项 -->
      <div
        v-for="(select, selectIdx) in problem.answers"
        :key="selectIdx"
        class="disFlxAC mt-15"
      >
        <div
          class="linh-36 shrink0 disFlxAC flexEnd ml-30"
          style="width: 100px"
        >
          {{ problemIdx + 1 }}.{{ selectIdx + 1 }}
        </div>
        <div style="flex: 1" class="px-10">
          <el-input
            v-model="select.answer"
            placeholder="请输入选项值"
            clearable
          ></el-input>
        </div>
        <div class="shrink0">
          <el-button
            v-if="selectIdx + 1 === problem.answers.length"
            class="mr-20"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            circle
            @click="addSelect(problem)"
          ></el-button>
          <el-button
            v-else
            class="mr-20"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            circle
            @click="deleteSelect(problem, selectIdx)"
          ></el-button>
          <el-checkbox v-if="showRequired" class="mr-10" v-model="select.required" :true-label="1" :false-label="0">必选</el-checkbox>
          <el-checkbox v-if="showConflict" class="mr-10" v-model="select.conflict" :true-label="1" :false-label="0">互斥</el-checkbox>
        </div>
      </div>
      <!-- 操作 -->
      <div class="borderT mt-15 pt-10">
        <el-select
          v-model="problem.type"
          placeholder="请选择"
          size="mini"
          style="width: 90px"
          class="mx-10"
        >
          <el-option label="单选" :value="1" />
          <el-option label="多选" :value="2" />
        </el-select>
        <el-button
          type="primary"
          size="mini"
          plain
          icon="el-icon-plus"
          @click="addProblem(problemIdx)"
          >在下方插入题目</el-button
        >
        <el-button
          v-if="questionnaire.length > 1"
          type="danger"
          size="mini"
          plain
          icon="el-icon-delete"
          @click="deleteProblem(problemIdx)"
          >删除本题</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    defaultValue: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 证型数组
    tcmList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 是否显示选项必选
    showRequired: {
      type: Boolean,
      default: false
    },
    // 是否显示选项互斥
    showConflict: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    defaultValue: {
      handler(nval) {
        this.questionnaire = nval;
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      // 默认存在一个题目
      questionnaire: [],
    };
  },
  methods: {
    // 增加选项
    addSelect(problem) {
      problem.answers.push({answer: "", required: 0, conflict: 0 });
      this.$emit('change');
    },
    // 删除选项
    deleteSelect(problem, selectIdx) {
      problem.answers.splice(selectIdx, 1);
      this.$emit('change');
    },
    // 在下方插入题目
    addProblem(problemIdx) {
      this.questionnaire.splice(problemIdx + 1, 0, {
        question: "",
        type: 1,
        answers: [{answer: "", required: 0, conflict: 0}]
      });
      this.$emit('change');
    },
    // 删除题目
    deleteProblem(problemIdx) {
      this.questionnaire.splice(problemIdx, 1);
      this.$emit('change');
    },
  },
};
</script>

<style lang="scss" scoped>
.borderBox {
  border: dashed 1px #999;
  padding: 15px;
}
</style>
